<template>
	<!-- 上传视频或者图片 -->
	<view class="up-page">
		
		<view class="show-box" v-for="item in list" :key="item.id">
			<!--图片 @tap是手指触摸离开时触发，没有300ms的延迟，减少click在移动端的延迟，提高了性能。-->
			<image 
				v-if="item.fileType === 1" 
				class="full" 
				:src="item.imgUrl" 
				@tap="previewImage(item.imgUrl)"
				:show-menu-by-longpress="true">
			</image>
			<!-- 视频 -->
			<view v-if="item.fileType === 2" class="full" style="background-color: black;">
				<video class="full" :src="item.imgUrl" controls></video>
			</view>
			
		</view>
		
		<!-- 上传按钮 -->
		<view @tap="chooseVideoImage" class="box-mode">
			<u-icon name="plus" color="#fff" size="40" style="margin-left: 15px;margin-top: 15px;"></u-icon>
		</view>
	</view>
 
</template>
<script>
	export default {
		data() {
			return {
				// 相册id
				albumId: null,
				list: [],
				sourceType: ['拍摄', '相册', '拍摄或相册'],
				sourceTypeIndex: 2,
				cameraList: [{
					value: 'back',
					name: '后置摄像头',
					checked: 'true'
				}, {
					value: 'front',
					name: '前置摄像头'
				}],
				cameraIndex: 0, //上传视频时的数量
				maxCount:9,//图片和视频允许上传的总数
			}
		},
		onLoad(options) {
			this.albumId = options.albumId
			this.sourceTypeIndex = 2, 
			this.sourceType = ['拍摄', '相册', '拍摄或相册'];
			this.getList()
		},
		methods: {
			//获取照片list
			getList(){
				this.$request({
					url: '/life/img/list',
					data: {
						albumId: this.albumId,
						pageNum: 1,
						pageSize:10
					}
				}).then(res =>{
					console.log(res);
					this.list = res.data.records
				}).catch((error) => {
					console.log(error);
				})
			},
			//点击上传图片或视频
			chooseVideoImage() {
				uni.showActionSheet({
					title: '选择上传类型',
					itemList: ['图片', '视频'],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			//上传图片
			chooseImages() {
				uni.chooseImage({
					count: this.maxCount, //允许选择的数量
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						const tempFilePaths = res.tempFilePaths;
						for (let i = 0; i < tempFilePaths.length; i++) {
							//files微信小程序不支持
							uni.uploadFile({
								url: this.$BASE_URL + '/life/img/add',
								name: 'file',
								filePath: tempFilePaths[i],
								header: {'Authorization':this.$store.state.token},
								formData: {
									'albumId': this.albumId,
									'fileType': 1 //照片
								},
								success: response => {
									uni.showToast({ title: "上传成功", icon: 'success' })
									this.getList()
								}
							})
						}
					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseMedia({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: this.maxCount,
					camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					sourceType: ['album', 'camera'],
					mediaType: ['video'],
					compressed: false,
					success: res => {
						const tempFiles = res.tempFiles;
						for (let i = 0; i < tempFiles.length; i++) {
							//files微信小程序不支持
							uni.uploadFile({
								url: this.$BASE_URL + '/life/img/add',
								name: 'file',
								filePath: tempFiles[i].tempFilePath,
								header: {'Authorization':this.$store.state.token},
								formData: {
									'albumId': this.albumId,
									'fileType': 2 //照片
								},
								success: response => {
									uni.showToast({ title: "上传成功", icon: 'success' })
									this.getList()
								}
							})
						}
					}
				})
			},
			//预览图片
			previewImage: function(e) {
				console.log(e)
				var urls = []
				this.list.forEach(item => {
					if(item.fileType == 1) {
						urls.push(item.imgUrl)
					}
				})
				uni.previewImage({
					current: e,
					urls: urls
				});
			}
		}
	}
</script>
<style lang="scss">
	/* 统一上传后显示的盒子宽高比 */
	.box-mode {
		width:50px;
		height: 50px;
		position: fixed; 
		top: 86%; 
		left: 80%;
		background-color: #2979ff; 
		border-radius: 28px;
	}
	
	.full {
		width: 100%;
		height: 100%;
	}
 
	.up-page {
		display: flex;
		flex-wrap: wrap;
		display: flex;
		width: 100%;
		.show-box:nth-child(3n){
			margin-right: 0;
		}
		.show-box {
			position: relative;
			margin-top:4vw;
			margin-left: 4vw;
			margin-right: 1vw;
			width: 27vw;
			height: 27vw;
			border-radius: 8rpx;
			overflow: hidden;
 
			.delect-icon {
				height: 40rpx;
				width: 40rpx;
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				z-index: 1000;
			}
		}
	}
	
</style>
